html,body,div,i{
	margin: 0;padding: 0;outline: 0;box-sizing: border-box;
}
html,body{height: 100%;font-size: 14px;color: #ccc;}
.container{height: 100%;display: flex;flex-direction:column;}
.clearfix{content: "";display: block;clear: both;}

.header{flex:0 0 60px;line-height: 60px;font-size: 20px;border-bottom: 1px solid #ccc;position: relative;}
.header>div{float: left;}
.header_left{ color: #666;padding: 0 100px 0 20px;}
.header_middle span{padding-left: 20px;}
.header_middle span:nth-of-type(1){color: #333;}
div.header_right{float: right;padding-right: 20px;}
.orange_line{width: 30px;height: 3px;background-color: #f60;border-radius: 5px;position: absolute;left: 166px;top:57px;}

.bodyer{flex:1 0 200px;overflow: auto;}
.story{width: 100%;padding: 10px 8px;height: 100px;vertical-align: middle;position: relative;}
.story img{border-radius: 50%;float:left;width: 15%;margin-right: 15px;box-shadow: 0 0 0 2px #f60;border: 1px solid snow;}
.story>i{display: inline-table;width: 19.2px;height: 14px;background-color: #66f;position: absolute;font-style: normal;color: snow;text-align: center;border-radius: 50%;font-size: 14px;border: 1px solid snow;left: 55px;top:54px;}
.story>div{position: absolute;top:77px;left: 0px;}
.story span{padding: 0 31px 5px 10px;color: #333;}
.story span:nth-of-type(2){padding-left: 2px;}
.story span:nth-of-type(3){padding: 0 32px 0 9px;}
.bar{color: #0a8cd2;height: 50px;line-height: 50px;padding: 0 20px;border-bottom: 1px solid #eee;border-top: 1px solid #eee;}
.bar i{font-size: 18px;}
.bar i:last-child{ color: #ccc; font-size: 24px;float: right;margin-top: 10px;}
.content{padding: 10px ;position: relative;height: 290px;border-bottom: 12px solid #eee;}
.content>div{float: left;}
.title img{border-radius: 50%;}
.name{float: left;padding:0 8px;color: #f55;}
.name i{display: inline-block;width: 16px;height: 16px;background: url(../images/icon.png) no-repeat 0 -123px;margin: 2px 0 0 3px;}
.time{position: absolute;top:34px;left: 68px;font-size: 12px;}
.ss{width: 88%;margin: 0 auto;padding: 0 10px;color: #666;font-size: 16px;}
.ss img{width: 40%;margin: 8px 0;}
.ss img:nth-of-type(1){margin-left: 8%;}
.ss img:nth-of-type(2){margin-right: 8%;}
.bottom_bar{width:100%;height: 40px;text-align: center;line-height: 40px;border-top: 1px solid #ccc;}
.bottom_bar>div{float:left;width: 33%;text-align: center;}
.bodyer::-webkit-scrollbar {
	width: 3px;
	background-color: transparent;
}
.bodyer::-webkit-scrollbar-thumb {
	width: 3px;
	background-color: #333;
}
// .gray_line{width: 414.4px;height: 12px;background-color: #eee;}


// .footer{flex:0 0 50px;}
.footer {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 50px;
	background-color: #fff;
} 
.footer a {
	text-decoration: none;
	display: block;
	float: left;
	width: 20%;
	height: 50px;
	text-align: center;
	padding: 10px 0;
}
.footer a p {
	font-size: 13px;
	color: #666;
}
.footer a img {
	width: 20px;
}
.footer a i{
	width: 23px;
	height: 23px;
	font-size: 20px;
}
.footer a:nth-of-type(3) {
	background-color: orangered;
	padding: 12px 0;
	margin: 5px 0;
	border-radius: 3px;
}
.footer a:nth-of-type(4) img {
	width: 19px;
	height: 19px;
}